<template>
  <div>
    <el-container>
      <el-main>
        <el-row class="home-top">
          <!--头像-->
          <el-col :span="5">
            <el-button @click="logo" style="padding: 0px;border: none;">
              <img :src="src" class="logo_img"/>
            </el-button>
          </el-col>
          <!--输入框-->
          <el-col :span="13">
            <el-input placeholder="请输入内容" v-model="input">
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
          </el-col>
          <!--系统消息接受，不一定会搞-->
          <el-col :span="4" :offset="1">
            <el-button class="home-notice" disabled>
              <el-badge :value="12">
                <i class="el-icon-message" style="font-size: 25px"></i>
              </el-badge>
            </el-button>
          </el-col>
        </el-row>

        <el-row class="home-tabs">
          <el-tabs stretch>
            <el-tab-pane>
              <span slot="label"><i class="iconfont icon-gupiao-copy"></i> 股票</span>
              <List v-bind:information="stock"></List>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"><i class="iconfont icon-jijin"></i> 基金</span>
              <List v-bind:information="fund"></List>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"><i class="iconfont icon-xinwen"></i> 新闻</span>
              <List v-bind:information="channel"></List>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-main>
      <el-dialog :visible.sync="visible" width="90%" top="20px">
        <iframe :src="url" style="height: 660px;" width="100%"></iframe>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import List from "@/components/home/List";

export default {
  name: "Home",
  components: {List},
  data() {
    return {
      input: '',
      //股票
      stock: "http://interface.sina.cn/finance/api_stock_sdyj.d.json?",
      // 基金
      fund: "http://interface.sina.cn/finance/api_fund_sdyj.d.json?",
      //新闻
      channel: "qq",
      src: '',
      visible: false,
      url: 'https://www.baidu.com/'
    }
  },
  mounted() {
    try {
      this.src = require('D:/IDEA/SpringBoot+Vue/img/' + sessionStorage.getItem("username") + '.jpg')
    } catch (e) {
      this.src = require('../assets/img/default.png')
    }
  },
  methods: {
    search() {
      this.url = "https://search.sina.com.cn/?q=" + this.input + "&c=news";
      this.visible = true;
    },
    logo() {
      this.$router.push("/personal");
    }
  }
}
</script>

<style scoped lang="less">
.home-top {
  padding-top: 20px;

  .logo_img {
    height: 50px;
  }

  .home-notice {
    border: none;
  }
}

.home-tabs {

}
</style>
